<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sellavi</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300,500;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Girassol&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/libs.min.css">
  <link rel="stylesheet" href="css/style.min.css">
</head>

<body>
  <div class=Wrapper>
    <!-- cursor -->
    <div class="cursor" id="cursor"></div>
    <div class="cursor2" id="cursor2"></div>
    <div class="cursor3" id="cursor3"></div>
    <!-- end cursor -->
    <div class="content">

      <header class="header">
        <div class="header-top">
          <div class="header-top__status">Internet terminal status: <span>Pending</span></div>
          <div class="header-top__title">Sellavi</div>
        </div>
        <!-- aside-panel -->
        <div class="home-page aside-panel">
          <div class="aside-panel__panel">

            <div class="hamburger hover-target menu-btn" id="toggle">
              <div class="hamburger__span one" id="one"></div>
              <div class="hamburger__span two" id="two"></div>
              <div class="hamburger__span three" id="three"></div>
            </div>

            <ul class="aside-panel__items accordion" id="accordion">
              <li class="aside-panel__item hover-target">
                <a class="aside-panel__home" href="#">Home</a>
              </li>
              <li class="aside-panel__item hover-target">
                <a class="aside-panel__management link" href="#">Online store management<i
                    class="fa fa-chevron-down"></i></a>
                <ul class="submenu">
                  <li class="aside-panel__submenu-item hover-target"><a href="#">Products</a></li>
                  <li class="aside-panel__submenu-item hover-target"><a href="#">Categories</a></li>
                  <li class="aside-panel__submenu-item hover-target"><a href="#">Product options</a></li>
                  <li class="aside-panel__submenu-item hover-target"><a href="#">Product Features</a></li>
                  <li class="aside-panel__submenu-item hover-target"><a href="#">Delivery Methods</a></li>
                  <li class="aside-panel__submenu-item hover-target"><a href="#">Inner pages</a></li>
                  <li class="aside-panel__submenu-item hover-target"><a href="#">Discounts</a></li>
                  <li class="aside-panel__submenu-item hover-target"><a href="#">Banners</a></li>
                  <li class="aside-panel__submenu-item hover-target"><a href="#">Design and Style</a></li>
                </ul>
              </li>
              <li class="aside-panel__item hover-target">
                <a class="aside-panel__cao" href="#">Customers and Orders</a>
              </li>
              <li class="aside-panel__item hover-target">
                <a class="aside-panel__settings" href="#">Settings</a>
              </li>
              <li class="aside-panel__item hover-target">
                <a class="aside-panel__payment" href="#">Payment for acquiring to the client of "X-Bank"</a>
              </li>
              <li class="aside-panel__item hover-target">
                <a class="aside-panel__services" href="#">Clearing and financial services</a>
              </li>
              <li class="aside-panel__item hover-target">
                <a class="aside-panel__apps" href="#">Online store apps</a>
              </li>
            </ul>

            <div class="aside-panel__controls">
              <div class="magnetic-block">
                <button class="round-button">
                  <div class="round-button__circle">
                    <div class="scroll-downs">
                      <div class="mousey">
                        <div class="scroller"></div>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>

          </div>
        </div>
        <!-- end aside-panel -->
        <div class="header__cover">
          <video autoplay playsinline muted loop preload>
            <source src="images/bg4.mp4">
          </video>
          <svg>
            <defs>
              <mask id="mask" x="0" y="0" height="100%" width="100%">
                <rect x="0" y="0" height="100%" width="100%" />
                <text x="60%" y="70%" fill="red" text-anchor="middle">
                  Sellavi
                </text>
              </mask>
            </defs>
            <rect x="0" y="0" height="100%" width="100%" />
          </svg>

          <div class="header__card-row">
            <div class="header__card-column">
              <div class="header__card-box">
                <div class="header__card-logo">
                  <i class="fas fa-puzzle-piece"></i>
                </div>
                <div class="header__card-title">
                  <h4>Add products</h4>
                </div>
                <div class="header__card-option">
                  <ul>
                    <li>
                      Add
                    </li>
                    <li>
                      the first products
                    </li>
                    <li>
                      to your online store
                    </li>
                  </ul>
                </div>
                <a class="header__card-btn hover-target" href="#">Add products</a>
              </div>
            </div>

            <div class="header__card-column">
              <div class="header__card-box">
                <div class="header__card-logo">
                  <i class="fab fa-windows"></i>
                </div>
                <div class="header__card-title">
                  <h4>Design choice</h4>
                </div>
                <div class="header__card-option">
                  <ul>
                    <li>
                      Customize
                    </li>
                    <li>
                      the look of
                    </li>
                    <li>
                      your online store
                    </li>
                  </ul>
                </div>
                <a class="header__card-btn hover-target" href="#">Design choice</a>
              </div>
            </div>

            <div class="header__card-column">
              <div class="header__card-box">
                <div class="header__card-logo">
                  <div class="header__card-domain">www.</div>
                </div>
                <div class="header__card-title">
                  <h4>Choose a domain</h4>
                </div>
                <div class="header__card-option">
                  <ul>
                    <li>
                      Buy or connect an existing domain
                    </li>
                    <li>
                      that matches your brand
                    </li>
                    <li>
                      directly through our platform
                    </li>
                  </ul>
                </div>
                <a class="header__card-btn hover-target" href="#">Choose a domain</a>
              </div>
            </div>
          </div>

        </div>
      </header>

      <!-- start sidebar -->
      <div class="menu">
        <div class="close-menu">
          <ion-icon name="close"></ion-icon>
        </div>

        <div class="nav">
          <ul class="main-menu">
            <li class="main-menu-item hover-target">
              <a href="#">Home</a>
            </li>

            <li class="main-menu-item hover-target">
              <a href="#">Online store management &nbsp; <ion-icon name="add"></ion-icon></a>

              <ul class="sidebar__submenu">
                <li class="submenu-item hover-target">
                  <a href="#">Products</a>
                </li>
                <li class="submenu-item hover-target">
                  <a href="#">Categories</a>
                </li>
                <li class="submenu-item hover-target">
                  <a href="#">Product options</a>
                </li>
                <li class="submenu-item hover-target">
                  <a href="#">Product Features</a>
                </li>
                <li class="submenu-item hover-target">
                  <a href="#">Delivery Methods</a>
                </li>
                <li class="submenu-item hover-target">
                  <a href="#">Inner pages</a>
                </li>
                <li class="submenu-item hover-target">
                  <a href="#">Discounts</a>
                </li>
                <li class="submenu-item hover-target">
                  <a href="#">Banners</a>
                </li>
                <li class="submenu-item hover-target">
                  <a href="#">Design and Style</a>
                </li>
              </ul>
            </li>

            <li class="main-menu-item hover-target">
              <a href="#">Customers and Orders</a>
            </li>

            <li class="main-menu-item hover-target">
              <a href="#">Settings</a>
            </li>

            <li class="main-menu-item hover-target">
              <a href="#">Payment for acquiring to the client of "X-Bank"</a>
            </li>

            <li class="main-menu-item hover-target">
              <a href="#">Clearing and financial services</a>
            </li>

            <li class="main-menu-item hover-target">
              <a href="#">Online store apps</a>
            </li>

          </ul>
        </div>

      </div>
      <!-- end sidebar -->

    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/ionicons@4.5.5/dist/ionicons.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
  <script src="js/libs.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>